<template>
  <div class="home" style="margin: 0 50px;">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App" />
    <div class="filter-box" style="width:200px;margin:0 auto">
      <div class="filter-item">①</div>
      <div class="filter-item">②</div>
      <div class="filter-item">③</div>
    </div>
    <div class="table" style="width:500px;margin:0 auto;text-align: left;">
      <div class="table-row">
        <div class="table-cell">1</div>
        <div class="table-cell">2</div>
        <div class="table-cell">3</div>
      </div>
      <div class="table-row">
        <div class="table-cell">4</div>
        <div class="table-cell">5</div>
        <div class="table-cell">6</div>
      </div>
    </div>
  </div>
</template>

<script>
import { driver } from 'driver.js';
import 'driver.js/dist/driver.css';
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue';

export default {
  name: 'HomeView',
  components: {
    HelloWorld
  },
  mounted() {
    const driverObj = driver({
      showProgress: true,
      nextBtnText: '下一步',
      prevBtnText: '上一步',
      doneBtnText: '确定',
      progressText: '第{{current}}步 共{{total}}步',
      steps: [
        {
          element: '.home',
          popover: { title: 'Hello', description: 'Welcome to my website' }
        },
        {
          element: '.filter-box',
          popover: {
            title: 'Filter',
            description: 'You can filter the content'
          }
        },
        {
          element: '.table',
          popover: { title: 'Table', description: 'You can sort the content' }
        }
      ]
    });

    driverObj.drive();
  }
};
</script>
